<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--css 是用 link  href-->
    <link rel="stylesheet" href="../css/pagination.css">
    <link rel="stylesheet" href="../css/fenye.css">
</head>
<body>
    <!--先引入 jquery-,后引入pagination-->
      <script src="../lib/jquery/dist/jquery.min.js"></script>
      <script src="../js/pagination.js"></script>
    <div class="an m-style">
        <a href=""></a>
    </div>
    <!--点击按钮的时候,决定是true深序 false降序-->
    <button class="sort">升序</button>
    <ul class="page">
        <!-- <li>
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt=""/>
            <h3>
                    米家互联网空调C1（一级能效）
            </h3>
            <p class="desc">变频节能省电，自清洁</p>
            <p class="price">1999元</p>
        </li> -->
    </ul>

      <!--列表页的分页-->
      <script>
          /*
            列表的分页
            页面的渲染
            jquery-pagination插件
            直接从网上下载下来
            使用
            =>依赖语言jquery
            =>先引入jquery,后引入css
          */

      var flag=true; 
      //准备一个变量接受数组
      var lists=[];

    //先请求数据,知道有多少数据,才知道我请求的有多少页
    //发送一个ajax请求
    getlist();
    function  getlist(){
        $.ajax({
        url:'../lib/some.json',
        dataType:'json',
        success:function(res){
            //渲染页面
        $('.an').pagination({
        pageCount: Math.ceil(res.length / 8), // 总页数=总条数/页面显示多少条
        current: 1, // 当前页
        jump: true,//跳转页
        coping: true,
        homePage: '首页', // 首页按钮的文本
        endPage: '末页', // 末页按钮的文本
        prevContent: '上页',
        nextContent: '下页',
        callback: function (api) { // 当你切换页面的时候会触发
          let curr = api.getCurrent();//获取当前页
        //   var list = list2.slice((curr - 1) * 12, curr * 12)
        //根据是第几页,从我的总数组里面筛选出一部分数据
        //slice包前不包后
        var resy=res.slice((curr-1)*8,curr*8);

        // 2. 每次使用分页的时候渲染一次
        bindHtml(resy);
        }
      }) 
               // 3-2. 每次使用分页器切换的时候渲染一次
               bindHtml(res.slice(0,8));   
              //给全局变量赋值
              lists=res;
        }
    })
    }
     
    function bindHtml(resy){
        //根据resy,渲染页面
        let str='';
        resy.forEach(item=>{
            str+=`
            <li data-id="${item.id}">
          <img src="${item.urls}"/>
            <h3>
                ${item.title}
            </h3>
            <p class="desc">${item.desc}</p>
            <p class="price">${item.price}</p>
        </li>
            `;
        })
        //渲染成功后放在页面里面
        $('ul').html(str);
    }

  
      var btn=document.querySelector('.sort');  
      //给按钮添加事件
      btn.onclick=function(){
          flag = !flag;
          console.log(flag);
          console.log(lists);
        
          lists.sort(function (a, b) {
            var priceA = parseFloat(a.price)
            var priceB = parseFloat(b.price)
            console.log(priceA);
            if (flag) {
              return priceA - priceB;
            } 
            else {
              return priceB - priceA;
              console.log(lists);
            }
          })

   
        $('.an').pagination({
        pageCount: Math.ceil(lists.length / 8), // 总页数=总条数/页面显示多少条
        current: 1, // 当前页
        jump: true,//跳转页
        coping: true,
        homePage: '首页', // 首页按钮的文本
        endPage: '末页', // 末页按钮的文本
        prevContent: '上页',
        nextContent: '下页',
        callback: function (api) { // 当你切换页面的时候会触发
          let curr = api.getCurrent();//获取当前页
        //   var list = list2.slice((curr - 1) * 12, curr * 12)
        //根据是第几页,从我的总数组里面筛选出一部分数据
        //slice包前不包后
        var resy=lists.slice((curr-1)*8,curr*8);

        // 2. 每次使用分页的时候渲染一次
        bindHtml(resy);
        }
      }) 

      // 3. 先把第一页的数据渲染一次
      bindHtml(lists.slice(0, 8))
      }
      //事件委托给父级
      $('ul').on('click','li',function(){
          const id=$(this).data('id')
          //获取对应的id
         let data={}
         for(var i=0;i<lists.length;i++){
             if(lists[i].id===id){
                data=lists[i];
                break;
             }         
         }
         console.log(data);
      })
      </script>
</body>
</html>